<!doctype html>
<html>
<head>
<script src="/js/jquery.js"></script>
<link href="/css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*是否过期*/
.term_box{ height:46px; position:relative; background-color:#fff;}
.term{ height:46px; line-height:46px; text-align:center; width:50%; float:left; font-size:14px; color:#65646b;}
.blue{ width:50%; height:2px; position:absolute; bottom:0; left:0; background-color:#01aff0;}
/*coupon优惠券*/
.move_box{ width:100%; overflow:hidden}
.move{ width:200%; position:relative;}
.coupon_box{ width:50%; float:left}
.coupon{ width:92%; margin-left:4%; margin-top:14px; height:74px;}
.coupon_num{ width:33%; height:74px; line-height:74px; text-align:center; background-color:#ff7f00; float:left; color:white; font-size:33px;}
.coupon_text{ float:left; position:relative; width:67%; height:74px; background-color:#fff; padding-left:5%; padding-top:14px; box-sizing:border-box}
.coupon_text h1{ line-height:26px; font-size:18px; color:#65646b}
.coupon_text span{ line-height:26px; font-size:18px; color:#c40000}
.coupon_text h2{ line-height:21px; font-size:12px; color:#65646b}
.coupon_text p{ line-height:24px; font-size:12px; color:#ff7f00; position:absolute;top:0;right:10px;}
.overdue .coupon_num{background-color:#b2bab8}
.overdue .coupon_text span,.overdue .coupon_text h1,.overdue .coupon_text h2,.overdue .coupon_text p{color:#b2bab8}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">优惠券
	<div class="header_left" onClick="window.history.go(-1)"><img src="/images/return.png"></div>
    <div class="header_right" id="open_sta" onClick="statement()">使用细则</div>
</div>
<!--term是否过期-->
<div class="term_box">
	<div class="term" style="color:#01aff0;">未使用</div>
    <div class="term">过期券</div>
    <div class="border_bottom"></div>
    <div class="blue"></div>
</div>
<!--coupon优惠券-->
<div class="move_box">
<div class="move">
	<!--未使用的优惠券-->
	<div class="coupon_box">
        <div class="coupon">
            <div class="coupon_num">￥10</div>
            <div class="coupon_text">
                <div class="border_top"></div>
                <div class="border_right"></div>
                <div class="border_bottom"></div>
                <h1>满<span>450</span>元使用</h1>
                <h2>使用期限：2015.11.11-2016.11.11</h2>
                <p>日常保洁</p>
            </div>
        </div>
        
        <div class="coupon">
            <div class="coupon_num">8折</div>
            <div class="coupon_text">
                <div class="border_top"></div>
                <div class="border_right"></div>
                <div class="border_bottom"></div>
                <h1>满<span>450</span>元使用</h1>
                <h2>使用期限：2015.11.11-2016.11.11</h2>
                <p>美发</p>
            </div>
        </div>
    </div>
    <!--已过期的优惠券-->
    <div class="coupon_box  overdue">
        <div class="coupon">
            <div class="coupon_num">￥10</div>
            <div class="coupon_text">
                <div class="border_top"></div>
                <div class="border_right"></div>
                <div class="border_bottom"></div>
                <h1>满<span>450</span>元使用</h1>
                <h2>使用期限：2015.11.11-2016.11.11</h2>
                <p>日常保洁</p>
            </div>
        </div>
        <!--coupon优惠券-->
        <div class="coupon">
            <div class="coupon_num">8折</div>
            <div class="coupon_text">
                <div class="border_top"></div>
                <div class="border_right"></div>
                <div class="border_bottom"></div>
                <h1>满<span>450</span>元使用</h1>
                <h2>使用期限：2015.11.11-2016.11.11</h2>
                <p>美发</p>
            </div>
        </div>
    </div>
</div>
</div>
<!--使用细则-->
<div class="black" id="black"></div>
<div class="statement" id="statement">
	<div class="statement_header">使用细则
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="/images/close.png">
    <div class="statement_text">
    	<h1>1.什么是优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>2.优惠券如何使用？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>3.如何获得优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>4.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>6.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
</div>
<script>
//隐藏使用细则
document.getElementById('black').style.display="none";
document.getElementById('statement').style.display="none";
//点击使用细则按钮，显示使用细则
function statement(){
	document.getElementById('black').style.display="block";
	document.getElementById('statement').style.display="block";
	}
//点击关闭按钮，关闭使用细则
function close_sta(){
	document.getElementById('black').style.display="none";
	document.getElementById('statement').style.display="none";
	}
$(".term:eq(0)").click(
	function(){
		$(".blue").animate({left:'0%'});
		$(".move").animate({left:'0%'});
		}
)
$(".term:eq(1)").click(
	function(){
		$(".blue").animate({left:'50%'});
		$(".move").animate({left:'-100%'});
		}
)
</script>
</body>
</html>

